<!--
@name:tabBaseInfo
@author:Zhenglei
@date:9:44
@description:tabBaseInfo
@update:2022/7/139:44
-->
<template>
  <div class="pd-20">
    <h2 style="font-weight: bold;margin-bottom:36px">基础信息：</h2>
    <el-form :model="subData"
             label-position="right"
             label-width="150px"
             ref="formModelRef"
             :rules='formModelRules'>
      <el-form-item label="关联主题：" prop="dolThemeId">
        <el-select v-model="subData.dolThemeId"
                   class="w-300"
                   @change="handleChangeTheme"
                   placeholder="请选择主题">
          <el-option v-for="item in themeDataSource"
                     :key="item.id"
                     :label="item.dolThemeName"
                     :value="item.id">
          </el-option>

        </el-select>
      </el-form-item>
      <el-form-item label="前台展示标题：" prop="name">
        <el-input v-model="subData.name" class="w-300" placeholder="请输入标题" clearable/>
      </el-form-item>

      <el-form-item v-if="subData.dolThemeId">
        <el-input v-model="addData.title"
                  clearable
                  class="w-200"
                  placeholder="请输入标题"></el-input>


        <el-select v-model="addData.type"
                   class="w-200"
                   @change="handleChangeType"
                   placeholder="请选择类型">
          <el-option v-for="item in typeDataSource"
                     :key="item.id"
                     :label="item.name"
                     :value="item.id">
          </el-option>

        </el-select>


        <el-select v-model="addData.content"
                   class="w-200"
                   value-key="id"
                   filterable
                   multiple
                   placeholder="请选择内容">
          <el-option v-for="item in filterContentDataSource"
                     :key="item.id"
                     :label="item.contentName"
                     :value="item">
          </el-option>

        </el-select>

        <el-input v-model="addData.sort"
                  type="number"
                  class="w-200"
                  placeholder="排序"/>
        <el-button type="primary" @click="handleOption('add')">增 加</el-button>
      </el-form-item>

      <el-form-item v-if="subData.dolThemeId">
        <element-table :columns="columns"
                       :data="subData.titles"
                       v-loading="loading">
          <template v-slot:sortNum="{row}">
            <el-input-number v-model="row.sortNum" controls-position="right" :min="1"/>
          </template>
          <template v-slot:indexItems="{row,index}">
            <el-tag v-for="(its,idx) in row.indexItems" :key="idx" style="margin-left: 5px">
              {{ its.contentName }}
            </el-tag>
          </template>
          <template v-slot:option="{row,index}">
            <el-button type="danger"
                       @click="handleOption('del',index)">删除
            </el-button>
          </template>

        </element-table>
      </el-form-item>

    </el-form>
    <p v-if="subData.dolThemeId">
      <el-button type="primary"
                 size="medium"
                 v-prevent-re-click
                 @click="handleOption('save')">保 存
      </el-button>
    </p>

  </div>
</template>

<script>
import ElementTable from "../../../../base/ElementTable";

export default {
  name: "tabBaseInfo",
  data() {
    return {
      loading: false,
      subData: {
        dolThemeId: '',
        name: '',
        titles: [],
      },
      addData: {
        title: '',
        sort: '',
        type: 1,
        content: [],
      },
      themeDataSource: [],
      contentDataSource: [],
      filterContentDataSource: [],
      typeDataSource: [
        {
          id: 1,
          name: '手动填写'
        }, {
          id: 2,
          name: '检测项'
        }
      ],
      columns: [
        {
          label: '标题',
          prop: 'titleContent',
          align: 'center'
        }, {
          label: '内容',
          prop: 'indexItems',
          align: 'center',
          isSlot: true
        }, {
          label: '排序',
          prop: 'sortNum',
          align: 'center',
          isSlot: true
        }, {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true,
        }
      ],
      formModelRules: {
        dolThemeId: [{required: true, message: '请选择主题', trigger: 'blur'},],
        name: [{required: true, message: '请输入标题', trigger: 'blur'},],
      }

    }
  },
  created() {
    this.searchDolTheme()
    this.getDetail()
  },

  methods: {
    //切换主题
    handleChangeTheme(val) {
      this.subData.titles = []
      this.addData.title = ''
      this.addData.sort = ''
      this.addData.content = []
      this.getDolThemeBaseInput(val)
    },
    handleChangeType(val) {
      this.addData.content = []
      this.filterContentDataSource = this.filterContentData(val)
    },

    //查询主题
    searchDolTheme() {
      this.post(this.api.healthMap.searchDolTheme, {
        useType: 1
      }).then((res) => {
        if (res.data.code === '200') {
          this.themeDataSource = res.data.object
        }
      })
    },
    //根据主题查内容
    getDolThemeBaseInput(dolThemeId) {
      this.post(this.api.healthMap.getDolThemeBaseInput, {
        dolThemeId: dolThemeId,
      }).then((res) => {
        if (res.data.code === '200') {
          this.contentDataSource = res.data.object

          this.filterContentDataSource = this.filterContentData(this.addData.type)
        }
      })
    },


    //获取详情
    getDetail() {
      this.post(this.api.healthMap.getDolThemeBaseDetail).then((res) => {
        if (res.data.code === '200') {
          this.subData.dolThemeId = res.data.object.dolThemeId
          this.subData.name = res.data.object.name
          this.subData.titles = res.data.object.titles
          this.subData.titles.forEach(x => {
            x.indexItems.forEach(y => {
              this.$set(y, 'contentName', y.name)
            })
          })
          this.getDolThemeBaseInput(res.data.object.dolThemeId)

        }
      })
    },
    //过滤数据
    filterContentData(type) {
      let newList = JSON.parse(JSON.stringify(this.contentDataSource))
      let arr = []
      if (type === 1) {
        arr = newList.filter(item => item.type === 1)
        arr = arr.map(x => ({
          contentName: x.indexName,
          id: x.indexId,
        }))
      } else if (type === 2) {
        arr = newList.filter(item => item.type === 3)
        arr = arr.map(x => ({
          contentName: x.referenceName,
          id: x.referenceId,
          deviceId: x.deviceId,
        }))
      }
      return arr
    },
    handleOption(op, index) {
      switch (op) {
        case 'add':
          if (!this.addData.title) {
            this.$message.warning('请输入标题')
          } else if (!this.addData.sort) {
            this.$message.warning('请输入排序')
          } else if (this.addData.content.length === 0) {
            this.$message.warning('请选择内容')
          } else {

            this.subData.titles.push({
              titleContent: this.addData.title,
              sortNum: this.addData.sort,
              titleType: this.addData.type,
              deviceId: this.addData.content[0].deviceId ? this.addData.content[0].deviceId : null,
              indexItems: this.addData.content
            })
            this.addData.title = ''
            this.addData.sort = ''
            this.addData.content = []
          }
          break;
        case 'del':
          this.$confirm('删除后，相应指标在生命圆盘不显示!', '提示', {
            type: 'warning'
          }).then(() => {
            this.subData.titles.splice(index, 1)
          })
          break;
        case 'save':
          this.$refs.formModelRef.validate(valid => {
            if (valid) {
              if (this.subData.titles.length === 0) {
                this.$message.warning('请添加内容！')
              } else {
                this.post(this.api.healthMap.oprDolThemeBase, this.subData).then((res) => {
                  if (res.data.code === '200') {
                    this.$message.success('保存成功！')
                  }
                })
              }
            }
          })


          break

      }
    },

  },
  components: {
    'element-table': ElementTable,
  }
}
</script>

<style scoped>

</style>
